<template>
	<div class="goodinfo-contioner">
		<!-- 轮播图 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div>
					<swipe :lunbolist="lunbolist" :isfull="'false'"></swipe>
				</div>
			</div>
		</div>
		
		<!-- 商品购买区域 -->
		<div class="mui-card">
		  <div class="mui-card-header">{{goodinfo.title}}</div>
		  <div class="mui-card-content">
			<div class="mui-card-content-inner">
			  <p class="price">
				市场价：<del>￥{{goodinfo.oldPrice}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodinfo.newPrice}}</span>
			  </p>
			  购买数量：
				<div class="mui-numbox" data-numbox-min='1'>
					<!-- goodinfo是异步的，有问题 我们可以 使用 watch 属性监听 -->
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input class="mui-input-numbox" type="number" id="goodcount"/>
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
			  <br/><br/>
			  <p>
				<mt-button type="primary" size="small">立即购买</mt-button>
				<mt-button type="danger" size="small" @click="addCar(id)">加入购物车</mt-button>
			  </p>
			</div>
		  </div>
		</div>
		
		<!-- 商品参数区域 -->
		<div class="mui-card">
		  <div class="mui-card-header">商品参数</div>
		  <div class="mui-card-content">
			<div class="mui-card-content-inner">
			  <p>商品货号：{{goodinfo.goodId}}</p>
			  <p>库存情况：{{goodinfo.kucun}}件</p>
			  <p>上架时间：{{goodinfo.addTime|dateFormat}}</p>
			</div>
		  </div>
		  <div class="mui-card-footer">
			<mt-button type="primary" size="large" plain >图文介绍</mt-button>
			<mt-button type="danger" size="large" plain @click="getGoodComment(goodinfo.id)">商品评论</mt-button>
		  </div>
		</div>
	</div>
</template>

<script>
	import mui from "../../lib/mui/js/mui.min.js";
	import Swipe from "../common/Swipe.vue";
	export default{
		data(){
			return {
				id:this.$route.params.id,
				lunbolist:[],
				goodinfo:{},
				max:{}
			}
		},
		methods:{
			getLunboList(){
				this.$http.get("/myvue/home/lunbo").then(function(res){
					if(res.body){
						this.lunbolist = res.body;
					}else{
						// 失败的
					}
				});
			},
			getGoodInfo(){
				this.$http.get("/myvue/goods/info/"+this.id).then(function(res){
					if(res.body){
						this.goodinfo = res.body;
						this.max = this.goodinfo.kucun;
					}else{
						// 失败的
					}
				});
			},
			getGoodComment(id){
				console.log(id);
				this.$router.push({ name: 'goodcomment', params: { id }});
			},
			//添加购物车
			addCar(id){
				var count = parseInt(document.getElementById("goodcount").value);
				var item = {
					'id':id,
					"title":this.goodinfo.title,
					'count':count,
					'selected':true,
					'price':this.goodinfo.newPrice
				};
				//先调用后台保存
				this.$http.post("/myvue/car/add",item,{emulateJSON: true}).then(res=>{
					if(res.body){
						this.$store.state.car.push(item);
					}
				});
			}
		},
		created() {
			this.getLunboList();
			this.getGoodInfo();
		},
		mounted() {
			// 初始化数字选择框组件
			mui(".mui-numbox").numbox();
			console.log(this.max);
		},
		components:{
			swipe:Swipe
		},
		watch:{
			// 属性监听
			max: function(newVal, oldVal) {
			  // 使用 JS API 设置 numbox 的最大值
			  mui(".mui-numbox")
				.numbox()
				.setOption("max", newVal);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.now_price {
	    color: red;
	    font-size: 16px;
	    font-weight: bold;
	 }
</style>
